
<template>
    <div class="ChangeForm">
        <Row>
            <Col span="24">
                <Button type="primary" class="export-btn" @click="openModal">新增申请</Button>
                <Button type="primary" class="export-btn">导出报表</Button>
            </Col>
            <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="formValidateRule">
                <Col span="24">
                    <Row>
                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="申请编号" prop="applyNo">
                                <Input clearable v-model="formValidate.applyNo" placeholder />
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="内部合同号:" v-if="!isSP">
                                <Input clearable v-model="formValidate.contractNo" placeholder />
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="费用类型" prop="costType">
                                <Select v-model="formValidate.costType" multiple clearable>
                                    <Option v-for="(item,index) in processModeDict" :key="index" :value="item.value">{{item.title}}</Option>
                                </Select>
                            </FormItem>
                        </Col>

                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="客户姓名" prop="custName">
                                <Input clearable v-model="formValidate.custName" placeholder />
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :lg="8" v-if="!isSP">
                            <FormItem label="生效" prop="dataSource">
                                <Select v-model="formValidate.dataSource" placeholder="请选择" clearable>
                                    <Option v-for="(item,index) in dataDict.businessSourceDict" :key="index" :value="item.value">{{item.title}}</Option>
                                </Select>
                            </FormItem>
                        </Col>

                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="处理状态" prop="processStatus">
                                <Select v-model="formValidate.processStatus" placeholder="请选择">
                                    <Option v-for="(item,index) in dataDict.processStatusDict" :key="index" :value="item.value">{{item.title}}</Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="申请时间" prop="startCreateDate">
                                <DatePicker
                                    v-model="createDate"
                                    type="daterange"
                                    format="yyyy-MM-dd"
                                    separator=" 到 "
                                    clearable
                                    @on-change="createDateRange"
                                    placeholder="选择起始时间"
                                ></DatePicker>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="结束时间" prop="endDate">
                                <DatePicker
                                    v-model="finishDate"
                                    type="daterange"
                                    separator=" 到 "
                                    format="yyyy-MM-dd"
                                    clearable
                                    @on-change="finishDateRange"
                                    placeholder="选择起始时间"
                                ></DatePicker>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="到期日" prop="endDate">
                                <DatePicker
                                    v-model="finishDate"
                                    type="daterange"
                                    separator=" 到 "
                                    format="yyyy-MM-dd"
                                    clearable
                                    @on-change="finishDateRange"
                                    placeholder="选择起始时间"
                                ></DatePicker>
                            </FormItem>
                        </Col>
                        <Col :xs="24" :sm="12" :lg="8">
                            <FormItem label="生效日" prop="endDate">
                                <DatePicker
                                    v-model="finishDate"
                                    type="daterange"
                                    separator=" 到 "
                                    format="yyyy-MM-dd"
                                    clearable
                                    @on-change="finishDateRange"
                                    placeholder="选择起始时间"
                                ></DatePicker>
                            </FormItem>
                        </Col>
                    </Row>
                </Col>

                <Col span="24">
                    <div class="contract-close-btns">
                        <Button type="primary" @click="handleSubmit('formValidate')" style="margin-right:16px">查询</Button>
                        <Button type="primary" @click="handleReset('formValidate')">重置</Button>
                    </div>
                </Col>
            </Form>
        </Row>
    </div>
</template>
<script>
export default {
    props: {
        formValidate: {
            type: Object,
            required: true
        },
        formValidateRule: {
            type: Object,
            required: true
        },
        dataDict: {
            type: Object,
            required: true
        },
        isSP: {
            type: Boolean,
            required: true,
            default: true
        }
    },
    data() {
        return {
            loading: false,
            createDate: null,
            finishDate: null
        };
    },
    mounted() {
        console.log(this.dataDict.processStatusDict);
    },
    computed: {
        // dict: () => this.dataDict || []
    },
    methods: {
        init() { },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$emit("getList", this.formValidate);
                }
            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
            this.handleSubmit(name)
        },
        openModal() {
            this.$emit("showModal", true);
        },
        createDateRange(v) {
            if (v) {
                this.formValidate.startCreateDate = v[0];
                this.formValidate.endCreateDate = v[1];
            }
        },
        finishDateRange(v) {
            if (v) {
                this.formValidate.startFinishDate = v[0];
                this.formValidate.endFinishDate = v[1];
            }
        }
    }
};
</script>
<style scoped>
.export-btn {
    margin-bottom: 16px;
}
.contract-close-btns {
    padding-bottom: 28px;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
}
</style>
